<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
        font-size: 12px;
        font-family:"微软雅黑";
    }
    #nav li{
        float: left;
        width: 120px;
        height: 60px;
        border-right: 1px #4B4B4B solid;
        line-height: 60px;
        text-align: center;
    }
    #nav li a{
        font-size:16px;
        text-decoration: none;
        vertical-align: middle;
        line-height: 60px;
        color: white;
    }
    #nav li:hover{
        background-color: #D63229;
    }
    #inf{
        width: 1007px;
        height: 267px;
        margin: 0 5px;
    }
    #inf p{
        font-size: 15px;
    }
    i,em,b,strong{
        font-style: normal;
        color: gray;
        display: inline-block;
        line-height: 20px;
    }
    b,strong{
        font-weight: 500;
    }
    #news{
        float: left;
        margin:0 30px;
        width: 440px;
        height: 223px;
    }
    #news p{
        width: 440px;
        height: 73px;
        line-height: 73px;
        vertical-align: middle
    }
    #news ul{
        list-style: none;
    }
    #news li{
        background: url(images/list.jpg) no-repeat left center;
        height: 25px;
        line-height: 25px;
        vertical-align: middle;
        padding-left: 10px;
    }
    #news a{
        text-decoration: none;
        color: #8e8e8e;
        display: inline-block;/*float:left*/
        width: 310px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
    }
    #news span{
        color: #8e8e8e;
        float: right;
    }
    #news a:hover{
        color: #D63229;
    }
    #intr{
        float: left;
        height: 223px;
        width: 220px;
        background-color: #f1f1f1;
        padding: 22px;
    }
    #intr p{
        line-height: 33px;
        width: 195px;
    }
    #intr i{
        font-size: 14px;
        width: 195px;
        margin-top: 10px;
    }#intr b{
        font-size: 13px;
        width: 195px;
        padding-bottom: 20px;
    }
    #intr em{
        color: gray;
        height: 20px;
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #rec{
        float: left;
        padding-left: 20px;
        padding-right: 10px;
        width: 200px;
        height: 267px;
        background:#FBFBFB url(images/green.jpg) no-repeat right bottom;

    }
    #rec p{
        line-height: 73px;
        width: 195px;
        height: 73px;
    }
    #rec strong{
        color:gray;
        letter-spacing: 1px;
        line-height: 25px;
    }
    #rec a img{
        position:relative;
        top: 70px;
    }
    #pro{
        width: 1001px;
        height: 200px;
        margin: 0 5px;
    }
    #pro li{
        list-style: none;
        float: left;
        margin: 20px ;
    }
    #pro a{
        text-decoration: none;
        color: gray
    }
    #pro p{
        width: 210px;
        line-height: 20px;
    }
    #lis{
        width: 1000px;
        height: 250px;
        background: #E5E5E5;
        margin: 30px  5px 0;
    }
    #lis .pb{
        width:150px;
        line-height: 30px;
        font-size: 16px;
        color: rgb(90, 88, 88);
        border-bottom:1px solid rgb(71, 70, 70); 
        margin-bottom: 10px;
    }
    #lis #lis3{
        width: 470px;
        float: left;
        margin: 0 30px;
    }
    #lis .lis{
        width: 150px; 
        float: left;
    }
    #lis ul{
        list-style: none;
    }
    #lis li{
        background: url(images/foticon.jpg) no-repeat left center;
        padding-left: 10px;
    }
    #lis .tech{
        width: 200px; 
        float: left;
    }
    #lis .map{
        width: 250px; 
        float: left;
    }
    #lis li{
        color: rgb(99, 98, 98);
        font-size: 10px;
        line-height: 25px;
    }
    #web{
        width: 970px;
        padding:20px 30px ;
        margin: 0 5px;
    }
    #web li{
        float: left;
        border-right: 1px solid gray;
        padding:0 10px;
    }
    #web li a{
        text-decoration: none;
        color: gray
    }
    #web img{
        margin: 0 10px;
    }
    </style>
</head>
<body>
    <div style="width:974px; height: 25px; margin: 45px 28px;line-height: 25px;">
        <a href="#;"style="display: inline-block; line-height:25px;"><img src="images/wolongimg.jpg" style="vertical-align:bottom;height: 25px;"></a>
        <form action="" method="GET" name="search"style="float: right;height: 25px;width: 250px;">
            <span style="border: 1px #E5E5E5 solid; display:block; background: #F1F1F1;width: 250px;height: 25px;">
                <input type="text" placeholder="SEARCH..."style=" font-size:14px; display: inline-block;border:none;background-color:#F1F1F1;color:#858585;height: 25px;width: 224px;vertical-align:top;" >
                <input type="submit"value="" style="width: 22px;height: 20px; border: none;background: url(images/wolongimg2.jpg) no-repeat left bottom;">
            </span>
        </form>
    </div><!--优化大小-->
    <div>
        <ul id="nav" style="padding: 0 15px;margin: 0 5px; background: #2e2e2e;width: 969px;height: 60px;list-style: none;">
            <li><a href="#">集团介绍</a></li>
            <li><a href="#">产品中心</a></li>
            <li><a href="#">卧龙市场</a></li>
            <li><a href="#">技术研发</a></li>
            <li><a href="#">国际合作</a></li>
            <li><a href="#">投资者关系</a></li>
            <li><a href="#">新闻资讯</a></li>
            <li style="border: none;"><a href="#">人力资源</a></li>
        </ul>
    </div>
    <div style="margin: 0 5px"><img src="images/banner.jpg"></div>
    <div id="inf">
         <div id="news">
        <p>新闻资讯</p>
        <ul >
            <li><a href="#">陈建成董事长出席ATB集团招开年度大会</a><span>2013-07-30</span></li>
            <li><a href="#">陈建成董事长出席ATB集团招开年B集团招开年B集团招开年B集团招开年度大会</a><span>2013-07-30</span></li>
            <li><a href="#">陈建成董事长出席ATB集团招开年度大会</a><span>2013-07-30</span></li>
            <li><a href="#">陈建成董事长出席ATB集团招开年度大会</a><span>2013-07-30</span></li>
            <li><a href="#">陈建成董事长出席ATB集团招开年度大会</a><span>2013-07-30</span></li>
            <li><a href="#">陈建成董事长出席ATB集团招开年度大会</a><span>2013-07-30</span></li>
        </ul>
    </div>
    <div id="intr">
        <p>卧龙介绍</p><br>
        <i>公司成立于1984年</i><br>
        <b>经过近30年的发展</b><br><br><br>
        <em>已成为电器制造、房地产开发和金融投资三业并举的综合性跨国公司巨头，未来将会更加的发展壮大！！！</em>
    </div>
    <div id="rec">
        <p>人才招聘</p>
        <strong>培养一流的人才，铸造一流的工程，实现员工与企业的共同发展。</strong>
        <a href="#"><img src="images/more.jpg" ></a>
    </div>
    </div>
   
    <div id="pro">
        <ul>
            <li><a href="#"><img src="images/img01.jpg" alt=""></a><br>
                <a href="#"><p>培养一流的人才，铸造一流的工程，实现员工与企业培养一流的与企业...</p></a></li>
            <li><a href="#"><img src="images/jieneng.jpg" alt=""></a><br>
                <a href="#"><p>培养一流的人才，铸造一流的工程，实现员工与企业培养一流的与企业...</p></a></li>
            <li><a href="#"><img src="images/img02.jpg" alt=""></a><br>
                <a href="#"><p>培养一流的人才，铸造一流的工程，实现员工与企业培养一流的与企业...</p></a></li>
            <li><a href="#"><img src="images/img03.jpg" alt=""></a><br>
                <a href="#"><p>培养一流的人才，铸造一流的工程，实现员工与企业培养一流的与企业...</p></a></li>
        </ul>
    </div>
    <div id="lis">
        <div id="lis3">
            <p class="pb" style="width: 450px;">产品中心</p>
            <div class="lis">
                <ul >
                    <li>汽车电机</li>
                    <li>汽车电机</li>
                    <li>汽车电机</li>
                    <li>大功率电机</li>
                    <li>汽车电机</li>
                </ul>
            </div>
            <div class="lis">
                <ul >
                    <li>汽车电机</li>
                    <li>汽车电机</li>
                    <li>汽车电机</li>
                    <li>大功率电机</li>
                </ul>
            </div>
            <div class="lis">
                <ul >
                    <li>汽车电机</li>
                    <li>汽车电机</li>
                    <li>汽车电机</li>
                    <li>大功率电机</li>
                </ul>
            </div>
        </div>
        <div class="tech" style="">
            <p class="pb" >技术研发</p>
            <ul >
                <li>汽车电机</li>
                <li>汽车电机</li>
                <li>汽车电机</li>
                <li>大功率电机</li>
            </ul>
        </div>
        <div class="map">
            <p class="pb" style="width: 250px;">网络营销</p>
            <img src="images/map.jpg">
        </div>
    </div>
    <div id="web">
        <ul style="list-style: none;">
            <li ><a href="#">网站地图</a></li>
            <li ><a href="#">网站地图</a></li>
            <li ><a href="#">网站地图</a></li>
            <li style="border-right: none;"><a href="#" >网站地图</a></li>
        </ul>
        <p style="float: right;color: gray;">卧龙版权所有©浙ICP  分享到：
                <a href="#"style="text-decoration: none;">
                <span>
                    <img src="images/sina.jpg">
                    <img src="images/weixin.jpg">
                    <img src="images/dou.jpg">
                    <img src="images/sina.jpg">
                    <img src="images/sina.jpg">
                </span>
            </a>
        </p>
        <br><br><br><br>
    </div>
    
</body>
</html>